<template>
  <div>
    <draggable
      :list="dragList"
      ghost-class="ghost"
      :force-fallback="true"
      :group="{ name: 'list', pull: 'clone' }"
      :sort="false"
      itemKey="id"
    >
      <template #item="{ element }">
        <div class="item move">
          <label class="move">{{ element.label }}</label>
        </div>
      </template>
    </draggable>
  </div>
</template>
<script setup>
import draggable from "vuedraggable"
import { ref } from "vue"
const dragList = ref([
  {
    type: "line",
    label: "折线图",
    position: {
      width: 400,
      height: 300
    },
    option: {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value"
      },
      grid: { left: 0, top: 0, right: 0, bottom: 30 },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line"
        }
      ]
    }
  },
  {
    type: "bar",
    label: "柱状图",
    position: {
      width: 400,
      height: 300
    },
    option: {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value"
      },
      grid: { left: 0, top: 0, right: 0, bottom: 30 },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar"
        }
      ]
    }
  },
  {
    type: "pie",
    label: "饼图",
    position: {
      width: 300,
      height: 300
    },
    option: {
      grid: { left: 0, top: 0, right: 0, bottom: 0 },
      series: [
        {
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" }
          ]
        }
      ]
    }
  },
  {
    type: "echarts",
    label: "通用图表",
    position: {
      width: 400,
      height: 300
    },
    option: {
      grid: { left: 0, top: 0, right: 0, bottom: 0 }
    }
  },
  { label: "按钮", type: "button", id: 1 },
  { label: "单行文本", type: "wenben", id: 1 },
  { label: "多行文本", id: 2 },
  { label: "计数器", id: 3 },
  { label: "单选框组", id: 4 }
])
</script>
<style scoped lang="less"></style>
